<template>
  <dv-full-screen-container class="box">
    <dv-border-box-11 title="演示">
        <div class="box1">
          <div class="box2">
            <Region></Region>
          </div>
          <div class="box2">
            <Ring></Ring>
          </div>
          <div class="box2">
            <Histogram></Histogram>
          </div>
          <div class="box2">
            <Motion></Motion>
          </div>
        </div>
        <div class="box1">
          <div class="box4">
            <DomeVue></DomeVue>
          </div>
        </div>
        <div class="box1" style="margin-left: 10px;">
          <div class="box2">
            <Region></Region>
          </div>
          <div class="box2">
            <Ring></Ring>
          </div>
          <div class="box2">
            <Histogram></Histogram>
          </div>
          <div class="box2">
            <Motion></Motion>
          </div>
        </div>
    </dv-border-box-11>
  </dv-full-screen-container>
</template>

<script>
import Region from "./Region.vue"
import Ring from "./Ring.vue"
import Histogram from "./Histogram.vue";
import Motion from "./Motion.vue";
import DomeVue from "./Dome.vue";
export default {
  components:{
    Region,Ring,Histogram,Motion,DomeVue
  }
}
</script>

<style  scoped>

.box{
  background-color: black;

}
.box1{
  padding-top: 60px;
  margin:auto;
  float:left;
  margin-left:7px
}
.box2{
  width:492px;
  margin-top:4px

}

.box4{
  width:900px;
}


</style>